<template>
  <div id="order">
    <el-drawer title="我的订单" :visible.sync="drawer" :before-close="handleClose" size="70%">
      <el-tabs type="card">
        <el-tab-pane label="已支付订单">
          <ul style="padding: 20px;">
            <li style="font-weight: bold; list-style: none; margin-bottom: 10px;">
              <el-row>
                <el-col :span="1">
                  <div class="grid-content bg-purple">
                    编号
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple-light">商品图片</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">产品名称</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">参数</div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple-light">数量</div>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content bg-purple">单价</div>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content bg-purple">总价</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple">下单日期</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">操作</div>
                </el-col>
              </el-row>
            </li>

            <li v-for="(item, index) in orderList" :key="index" style="line-height: 50px; list-style: none;">
              <el-row>
                <el-col :span="1">
                  <div class="grid-content bg-purple">
                    {{ index + 1 }}
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple-light">
                    <el-image :src="require('@/assets/' + item.pic)" class="image" style="height: 50px;"></el-image>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">{{ item.name }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">{{ item.parameter }}</div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple-light">
                    {{ item.quantity }}
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content bg-purple" style="color: red;">￥{{ item.price }}</div>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content bg-purple" style="color: red;font-weight: bold;">￥{{ item.price * item.quantity }}</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple">{{ item.date }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    <el-button size="mini" type="danger" plain @click="removeItem(item)">删除此订单</el-button>
                  </div>
                </el-col>
              </el-row>
            </li>

          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>

  </div>
</template>
  
<script>
export default {
  name: 'order',
  data() {
    return {
      drawer: true,
      orderList: []
    }
  },
  created() {
    this.getOrder();
  },
  methods: {
    handleClose() {
      this.$router.push("/");
    },
    getOrder() {
      const user = localStorage.getItem('userinfo');
      this.$axios.get("http://localhost:3000/order").then(res => {
        this.res = res.data;
        console.log(res.data);
        for (let i = 0; i < this.res.length; i++) {
          if (this.res[i].account === user) {
            this.orderList.push(this.res[i]);
          }
        }

      })
        .catch(error => {
          console.log(error);
        })
    },
    removeItem(item) {
      this.$confirm('确定永久删除这个订单吗吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const index = this.orderList.indexOf(item);
        if (index > -1) {
          this.orderList.splice(index, 1);
        }

        this.$axios.delete('http://localhost:3000/order/' + item.id)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除订单成功!'
            });
          })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作！'
        });
      });
    },
  }
}
</script>
  
<style scoped>
</style>
  